<template>
	<div id="" class="full">
	<div id="" class="grid">
		<van-grid :border="false" :column-num="2" :gutter="10">
			<van-grid-item class="van-grid-item" v-for="(item,index) in commodity" @click="toDetail(index)">
				<div id="" class="van-grid-item-content">
					<van-image :src="item.src" />
					<span class="commodity_name">
						{{item.name}}
						<svg t="1653902056435" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="3579" data-spm-anchor-id="a313x.7781069.0.i5"
							width="200" height="200">
							<path
								d="M511.889995 128.745223c-201.858404 0-365.490182 163.640987-365.490182 365.490182 0 201.848171 163.631778 365.489158 365.490182 365.489158s365.489158-163.640987 365.489158-365.489158C877.379153 292.38621 713.748399 128.745223 511.889995 128.745223zM632.031259 527.981996c-19.809161 27.473725-47.043433 60.480466-70.813812 79.976496-17.23043 14.116509-49.076742 35.996842-74.16821 31.989575-64.639183-10.314926-50.879807-161.123654-94.415346-195.138352-19.907399-5.497201-29.508058 23.574928-40.448224 6.388501-17.203824-13.634532 16.570397-37.459147 33.710776-51.182706 21.183462-16.954137 46.168506-41.117466 74.16821-30.614252 54.537104 20.459984 15.445784 144.411017 67.440995 171.376159 26.866904-20.531616 56.982806-54.474682 50.575886-95.967702-5.095042-13.848403-29.713742-9.449209-43.830251-6.39771-0.731664-63.291488 130.74988-111.806435 141.610228-25.582655C681.758824 465.600227 632.031259 527.981996 632.031259 527.981996z"
								p-id="3580" fill="#1296db"></path>
						</svg>
					</span>
					<span class="commodity_author">
						<svg t="1653902225291" class="icon" viewBox="0 0 1024 1024" version="1.1"
							xmlns="http://www.w3.org/2000/svg" p-id="4460" width="200" height="200">
							<path
								d="M213.333333 128C165.973333 128 128 166.4 128 213.333333L128 810.666667C128 857.6 166.4 896 213.333333 896L810.666667 896C857.6 896 896 857.6 896 810.666667L896 213.333333C896 166.4 857.6 128 810.666667 128M256 298.666667 725.333333 298.666667 725.333333 384 640 384 640 597.333333C640 620.8 659.2 640 682.666667 640 706.133333 640 725.333333 620.8 725.333333 597.333333L810.666667 597.333333C810.666667 668.16 753.493333 725.333333 682.666667 725.333333 611.84 725.333333 554.666667 668.16 554.666667 597.333333L554.666667 384 426.666667 384 426.666667 725.333333 341.333333 725.333333 341.333333 384 256 384"
								p-id="4461" fill="#158fc5"></path>
						</svg>
						{{item.author}}
					</span>
					<div id="" class="commodity_price_box">
						<span class="commodity_price">$ 1800</span>
						<span class="commodity_price_arrow">
							<svg t="1653901929999" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="2285"
								data-spm-anchor-id="a313x.7781069.0.i1" width="200" height="200">
								<path
									d="M512.08257 56.577342C260.162881 56.577342 55.046365 260.699583 55.046365 513.613547 55.046365 766.520629 260.162881 970.642871 512.08257 970.642871c251.912807 0 457.029324-205.114796 457.029324-457.029324C969.110173 261.693858 763.995377 56.577342 512.08257 56.577342z m268.313183 480.799032v-0.006881L553.372504 765.390458c-6.971966 6.968526-15.930762 9.954791-24.896439 9.954791-8.958796 0-17.919312-2.986265-24.889558-9.954791-13.940492-13.940492-13.940492-35.848945 0-49.789437l166.05596-166.049079H255.776374c-19.513936 0-35.332885-15.817229-35.332885-35.332885 0-19.513936 15.818949-35.332885 35.332885-35.332886h417.008897l-168.202769-166.546217c-13.940492-13.940492-13.940492-35.848945 0-48.791721 13.940492-13.942212 35.842064-13.942212 48.790002 0l227.023249 225.034699c6.971966 6.966806 9.953071 14.936487 9.953071 24.889558 0 7.966241-2.981105 16.930198-9.953071 23.903884z"
									fill="" p-id="2286"></path>
							</svg>
						</span>
					</div>
	
				</div>
			</van-grid-item>
	
		</van-grid>
	</div>
	</div>
</template>

<script>
	export default {
		name: "blindbox",
		
		data() {
			return {
				commodity: [{
						src: "https://static.ibox.art/file/oss/test/image/nft-goods/96539b59879f48578746abfce8805d75.png?style=st6",
						name: "宇宙bobo猪",
						author: "ibox",
						price: '99'
					},
					{
						src: "https://static.ibox.art/file/oss/test/image/nft-goods/16328f81518b4c678d3ae27e6feb5193.png?style=st6",
						name: "威尼斯艺术节",
						author: "ibox",
						price: '99'
					},
					{
						src: "https://static.ibox.art/file/oss/test/image/nft-goods/c53a0c626dea4bf19d09e7c40bd15251.png?style=st6",
						name: "民国六大进去",
						author: "ibox",
						price: '99'
					},
					{
						src: "https://static.ibox.art/file/oss/test/image/nft-goods/465a46b576584acdab40b07e7120f60f.png?style=st6",
						name: "马迪托",
						author: "ibox",
						price: '99'
					},
					{
						src: "https://static.ibox.art/file/oss/test/image/nft-goods/e150104e253743d1a3098b381b7e95e8.jpg?style=st6",
						name: "金陵12拆",
						author: "ibox",
						price: '99'
					},
					
				],
				test: "123"
			}
		},
		methods: {
			//查看详情
			toDetail(index) {
				console.log(this.$route)
				console.log(index)
				//用这种方法传参，必须这么些，不能写path,否则你在取参数的时候this.$router.params.userId就是undefined.这是因为，params只能用name来引入路由，
		
				this.$router.push({
					name: "detailBlindbox", //这个name就是你刚刚配置在router里边的name
					params: this.commodity[index]
				})
		
			},
		
			
		},
		}
</script>

<style lang="less" scoped="scoped">
	*{
		margin: 0;
		padding: 0;
	}
	.full{
		width: 100%;
		
		// 商品九宫格图
		.grid {
			.van-grid-item {
		
				.van-grid-item-content {
					background-color: white;
					box-shadow: 0 6px 14px rgb(1 0 95 / 10%);
				}
			}
		
			span {
				display: flex;
				position: relative;
				width: 100%;
				height: 30px;
				text-align: left;
				padding-left: 10px;
				line-height: 20px;
				box-sizing: border-box;
			}
		
			svg {
				width: 20px;
				height: 20px;
			}
		
			.commodity_author {
				font-size: 8px;
				
			}
		
			.commodity_price_box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				box-sizing: border-box;
				height: 40px;
		
				.commodity_price_arrow {
					width: 40px;
		
					svg {
						width: 20px;
						height: 1.25rem;
					}
				}
			}
		}
	}
</style>
